<template>  
  <h1>当前的 n 值为: {{sum}}</h1>
  <button @click="sum ++">点我 n + 1</button>
  <br>
  <h2>{{msg}}</h2>
  <button @click="msg += '!' ">点我改变信息</button>
  <br>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <h2>薪资: {{person.job.j1.salary}}K</h2>
  <button @click="person.name += '@'">点我修改姓名</button>
  <button @click="person.age ++">点我年龄加1</button>
  <button @click="person.job.j1.salary ++">涨薪</button>
</template>

<script>  
import {reactive, ref, watchEffect} from 'vue'
export default {
  name: 'Demo',  
  setup() {  
    let sum = ref(0) 
    let msg = ref('凌宸你好啊')
    let person = reactive({
      name:'张三',
      age: 18,
      job:{
        j1:{
          salary: 20
        }
      }
    })
    watchEffect(() => {
      console.log(person.job.j1.salary)
      console.log(sum.value)
    })


    // 返回一个对象 (常用)
    return {
      sum, msg, person
    } 
  }
}
</script>

